<script setup lang="ts" name="inspection-overview">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import Bus from "@/utils/eventBus";
import { deviceList, deviceSave } from "@/api/server_set_patrol";
import {
  addCruiserSave,
  getCruiserList,
  uploadFile,
  getAllInspectionPersonList,
  getInspectionPersonitem,
} from "@/api/server_bill";
import { getUserList } from "@/api/server_set_account";

import {
  ElMessage,
  ElMessageBox,
  UploadUserFile,
  TabsPaneContext,
  UploadProps,
} from "element-plus";
import {
  getIserList,
  getDeptTree,
  getActionList,
  cameraSave,
  delCamera,
  getAllDeptCameraTree,
} from "@/api/server_set_camera";
import {
  getCameraVideoUrl,
  getCameraList_,
  getAllCameraList_,
  getFullDeptTree_,
  getUserVideoUrl,
} from "@/api/server_video";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from "echarts";
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import {
  CirclePlus,
  Search,
  Refresh,
  EditPen,
  Share,
  Notebook,
  Setting,
} from "@element-plus/icons-vue";
import { url } from "inspector";
import { ElTable } from "element-plus";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import todaya from "./tab/todaya.vue";
import weeka from "./tab/weeka.vue";
import yeara from "./tab/yeara.vue";
import todayb from "./tab/todayb.vue";
import weekb from "./tab/weekb.vue";
import yearb from "./tab/yearb.vue";
import { val } from "dom7";
import { valuesIn } from "lodash";
// 图片
import lan1 from "@/assets/image/home/lan1.png";
import hong1 from "@/assets/image/home/png/hong.png";
import lv1 from "@/assets/image/home/lv1.png";
const router = useRouter();

// 巡检点详情图
const cameraList = ref<any[]>([]);
const dialogVisible = ref(false);
const input = ref("");
const List = ref([]);
const total = ref(0);
const isEdit = ref(false);
const dialogVisible_add = ref(false);
const height = ref(0);
const tempIndex = ref();
const isBig = ref(false);
const dialogVisible_map = ref(false);
const listParams = ref({
  page: 1,
  pageSize: 20,
});

// 数据
const value = ref("");

// const handleClose = (done: () => void) => {
//   ElMessageBox.confirm("您确定要关闭对话框吗？")
//     .then(() => {
//       done();
//     })
//     .catch(() => {
//       catch error
//     });
// };
//数据

// 配置巡检点方法

const cascaderProps = reactive({
  label: "label",
  value: "id",
  children: "children",
  checkStrictly: true,
  emitPath: false,
});
// const tablee = (page: number) => {

// };
// const phonehandleClose = (done: () => void) => {
//   ElMessageBox.confirm("Are you sure to close this dialog?")
//     .then(() => {
//       done();
//     })
//     .catch(() => {
//       catch error
//     });
// };

const getAllCameraList = async () => {
  let res: any = await getCruiserList({});
  if (res.result == "success") cameraList.value = res.list;
  console.log('巡检点信息',cameraList.value);
  
};

const returnCameraIndex = (data: any) => {
  if (!data) {
    return;
  }
  let coordinate = data.coordinate || "";
  let left = coordinate.split(",")[0];
  let top = coordinate.split(",")[1];
  return { top: `${top}px`, left: `${left}px` };
};

const doubleclick = (event: any) => {
  isBig.value = !isBig.value;
  if (!isBig.value) {
    setMap();
    return;
  }
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let left = -event.offsetX + mapBlockWidth / 2;
  let top = -event.offsetY + mapBlockHeight / 2;
  setTimeout(() => {
    if (left > 0) left = 0;
    if (left < mapBlockWidth - mapIdWidth) left = mapBlockWidth - mapIdWidth;
    if (top > 0) top = 0;
    if (top < mapBlockHeight - mapIdHeight) top = mapBlockHeight - mapIdHeight;
    mapId.style.transform = `scale(${1})`;
    mapId.style.left = `${left}px`;
    mapId.style.top = `${top}px`;
  }, 100);
  mapId.oncontextmenu = function () {
    return false;
  };

  mapId.addEventListener("mousedown", function (event: any) {
    event.stopPropagation();
    var code = event.which;
    if (code != 3 || !isBig.value) {
      return;
    }
    let left = parseInt(mapId.style.left);
    let top = parseInt(mapId.style.top);
    let ol = event.clientX;
    let ot = event.clientY;
    document.onmousemove = function (ev) {
      let l = left + ev.clientX - ol;
      let t = top + ev.clientY - ot;
      if (l > 0) l = 0;
      if (l < mapBlockWidth - mapIdWidth) l = mapBlockWidth - mapIdWidth;
      if (t > 0) t = 0;
      if (t < mapBlockHeight - mapIdHeight) t = mapBlockHeight - mapIdHeight;
      mapId.style.left = l + "px";
      mapId.style.top = t + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };
  });
};

// 配置显示小地图

const doubleclick1 = (event: any) => {
  isBig.value = !isBig.value;
  if (!isBig.value) {
    setMap1();
    return;
  }
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  let mapBlock: any = document.querySelector(".setMapBlock-body");
  let mapId: any = document.querySelector(".setMapBlock");
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let left = -event.offsetX + mapBlockWidth / 2;
  let top = -event.offsetY + mapBlockHeight / 2;
  setTimeout(() => {
    if (left > 0) left = 0;
    if (left < mapBlockWidth - mapIdWidth) left = mapBlockWidth - mapIdWidth;
    if (top > 0) top = 0;
    if (top < mapBlockHeight - mapIdHeight) top = mapBlockHeight - mapIdHeight;
    mapId.style.transform = `scale(${1})`;
    mapId.style.left = `${left}px`;
    mapId.style.top = `${top}px`;
  }, 100);
  mapId.oncontextmenu = function () {
    return false;
  };

  mapId.addEventListener("mousedown", function (event: any) {
    event.stopPropagation();
    var code = event.which;
    if (code != 3 || !isBig.value) {
      return;
    }
    let left = parseInt(mapId.style.left);
    let top = parseInt(mapId.style.top);
    let ol = event.clientX;
    let ot = event.clientY;
    document.onmousemove = function (ev) {
      let l = left + ev.clientX - ol;
      let t = top + ev.clientY - ot;
      if (l > 0) l = 0;
      if (l < mapBlockWidth - mapIdWidth) l = mapBlockWidth - mapIdWidth;
      if (t > 0) t = 0;
      if (t < mapBlockHeight - mapIdHeight) t = mapBlockHeight - mapIdHeight;
      mapId.style.left = l + "px";
      mapId.style.top = t + "px";
    };
    document.onmouseup = function () {
      document.onmousemove = null;
    };
  });
};

const mapClick1 = (event: any) => {
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  function setMapIndex(x: number, y: number) {
    let indexPoint: any = document.querySelector(".index-point1");
    indexPoint.style.top = `${y}px`;
    indexPoint.style.left = `${x}px`;
    indexPoint.style.display = `block`;
    tempIndex.value = `${x},${y}`;
  }
  setMapIndex(offsetX, offsetY);
};

const setMap = () => {
  let mapBlock: any = document.querySelector(".map-block");
  let mapId: any = document.querySelector(".map-id");
  mapId.style.opacity = 1;
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let zoomVal = mapBlockHeight / mapIdHeight;
  let left = (mapBlockWidth - mapIdWidth) / 2;
  let top = (mapBlockHeight - mapIdHeight) / 2;
  mapId.style.transform = `scale(${zoomVal})`;
  mapId.style.left = `${left}px`;
  mapId.style.top = `${top}px`;
  mapId.oncontextmenu = function () {
    return false;
  };
};

// 巡检点弹窗
const dialogData = ref<any>({});
const dialogTableVisible = ref(false);
const cameraClick = (data: any) => {
  // let res = await getCameraVideoUrl({
  //   id: data.dept_id,
  // });

  getInspecs.value.inspectionPersonId = data.inspection_person_id;

  dialogTableVisible.value = true;
  dialogData.value = data;
  getInspectionItem(1);
  // if (res.result == "success") {
  //   Bus.$emit("openVideo", res);
  // }
};

// 获取巡检人员
const userList = ref<any>([]);
const getList = async () => {
  let res: any = await getUserList({});
  if (res.result == "success") {
    userList.value = res.list;
    total.value = Number(res.total);
  }
};
// 生命周期
var chartDom = document.getElementById("today")!;
var chartDom1 = document.getElementById("success1")!;
onMounted(() => {
  getList();
  let pageTable: any = document.querySelector(".apxbox");
  height.value = pageTable.clientHeight;

  getAllCameraList();
  setTimeout(() => {
    setMap();
  }, 500);
  getDeptInfo();
});

// 上传
const dialogImageUrl = ref("");
const dialogVisible3 = ref(false);
const disabled = ref(false);

// const handleRemove = (file: UploadFile) => {};

// const handlePictureCardPreview = (file: UploadFile) => {
//   dialogImageUrl.value = file.url!;
//   dialogVisible3.value = true;
// };

// const handleDownload = (file: UploadFile) => {};

// const fileList = ref<UploadUserFile[]>([
//   {
//     name: "",
//     url: "",
//   },
// ]);

const activeName = ref("first");
const activeName1 = ref("firs");

const handleClick = (tab: TabsPaneContext, event: Event) => {};
const handleClick1 = (tab: TabsPaneContext, event: Event) => {};

// 设置地图
const deptOptions = ref([]);

const getDeptInfo = async () => {
  let res = await getDeptTree({});

  if (res.result == "success") {
    deptOptions.value = res.deptTree;
  }
};

const setMap1 = () => {
  let mapBlock: any = document.querySelector(".setMapBlock-body");
  let mapId: any = document.querySelector(".setMapBlock");
  let mapBlockHeight = mapBlock.clientHeight;
  let mapBlockWidth = mapBlock.clientWidth;
  let mapIdHeight = mapId.clientHeight;
  let mapIdWidth = mapId.clientWidth;
  let zoomVal = mapBlockHeight / mapIdHeight;
  let left = (mapBlockWidth - mapIdWidth) / 2;
  let top = (mapBlockHeight - mapIdHeight) / 2;
  mapId.style.transform = `scale(${zoomVal})`;
  mapId.style.left = `${left}px`;
  mapId.style.top = `${top}px`;
  mapId.oncontextmenu = function () {
    return false;
  };
};

const openMap = () => {
  dialogVisible_map.value = true;
  setTimeout(() => {
    setMap1();
  }, 100);
};

const mapClick = (event: any) => {
  let offsetX = event.offsetX;
  let offsetY = event.offsetY;
  function setMapIndex(x: number, y: number) {
    let indexPoint: any = document.querySelector(".index-point");
    indexPoint.style.top = `${y}px`;
    indexPoint.style.left = `${x}px`;
    indexPoint.style.display = `block`;
    tempIndex.value = `${x},${y}`;
  }
  setMapIndex(offsetX, offsetY);
};

const setIndex = () => {
  formData.value.coordinate = tempIndex.value;
  dialogVisible_map.value = false;
};

// 添加智能巡检点
const formData = ref<any>({
  // dep: [],
  // action_list: "",
  name: "",
  device_spec: "",
  coordinate: "",
  standard: "",
  dept_id: "",
  phone: "",
  files: "",
  user_id: "",
  fileUrl: [],
});

// 获取电话
const usephone = ref();
const change = (val: any) => {
  use(val);
};
const use = (val: any) => {
  usephone.value = userList.value.find((item: any) => item.user_id == val);
  formData.value.phone = usephone.value.phone;
};

//保存数据
const confirmAdd = async (val: number) => {
  // let files = fileList.value.map((v) => {
  //   if (v.url) {
  //     return v.url;
  //   }
  // });

  let res: any = await addCruiserSave({
    name: formData.value.name,
    device_spec: formData.value.device_spec,
    coordinate: formData.value.coordinate,
    standard: formData.value.standard,
    dept_id: formData.value.dept_id,
    phone: formData.value.phone,
    files: formData.value.fileUrl,
    user_id: formData.value.user_id,
    // id: isEdit.value ? formData.value.device_id : 0,
    // deptId: formData.value.dept_id,

    // deptMark: formData.value.dept_mark,
    // factoryPhone: formData.value.factory_phone,
    // files: files.join(","),
  });

  const formDatafiles = ref("");

  if (res.result === "success") {
    ElMessage({
      type: "success",
      message: "保存成功!",
    });
    dialogVisible_add.value = false;
    getAllCameraList();
    //添加完成后重新获取数据
    formData.value = {};
  }
};
//巡检点日志
// 获取当天日期
const dateday = ref<any>("");
var a = new Date().getTime(); //获取到当前时间戳
var b = new Date(a); //创建一个指定的日期对象

function nowDate(now: any) {
  var year = now.getFullYear(); //年份
  var month = now.getMonth() + 1; //月份（0-11）
  var date = now.getDate(); //天数（1到31）
  var hour = now.getHours(); //小时数（0到23）
  var minute = now.getMinutes(); //分钟数（0到59）
  var second = now.getSeconds(); //秒数（0到59）
  return year + "-" + month + "-" + date;
}

// 分页
const page = ref("");

dateday.value = nowDate(b);
const getInspecs = ref({
  page: 1,
  pageSize: 8,
  finalStatus: "all",
  showNotNormal: "true",
  inspectionPersonId: "",
  startTime: "2022-08-01 00:00:01",
  endTime: "2022-10-21 23:59:59",
});
const getInspectionItem = async (val: any) => {
  let res: any = await getInspectionPersonitem({
    page: val,
    pageSize: getInspecs.value.pageSize,
    finalStatus: getInspecs.value.finalStatus,
    showNotNormal: getInspecs.value.showNotNormal,
    inspectionPersonId: getInspecs.value.inspectionPersonId,
    startTime: getInspecs.value.startTime,
    endTime: getInspecs.value.endTime,
  });

  if (res.result === "success") {
    getInspections.value = res.list;
    totalitem.value = res.total;
  }
};
const handleCurrentChange = (val: any) => {
  page.value = val;
  getInspectionItem(val);
};
const getInspections = ref<any>({});
const totalitem = ref<any>();

// 单个巡检任务
const widthimggetInspec = ref(false);
const widthimggetInspecitem = ref<any>({});
const getInspectionsitem = (item: any) => {
  widthimggetInspec.value = true;
  widthimggetInspecitem.value = item;
};

const addItem = () => {
  // isEdit.value = false;
  // formData.value = {
  //   dept_type: "inner",
  // };
  // fileList.value = [];
  dialogVisible_add.value = true;
};

// 巡检点输入框
const textarea = ref("");

// 上传图片
//保存数据
// const uploadFiles = async () => {
//   let res: any = await uploadFile({

//   });
// };
// token
const headersObj = ref({
  TOKEN: window.localStorage.getItem("token"),
});
// const fileListab = ref<UploadUserFile[]>([]);
const dialogImageUrlab = ref("");
const fileUrl = ref("");
const dialogVisibleab = ref(false);

const success = (response: any) => {
  if (response.result === "success") {
    formData.value.fileUrl.push(response.fileUrl);
    ElMessage({
      type: "success",
      message: "已选择图片",
    });
  }
};

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {};

const handlePreview: UploadProps["onPreview"] = (file) => {};

// 巡检点图标配置
const tubiao = ref({
  lan1: lan1,
  hong1: hong1,
  lv1: lv1,
});
// 动态图标
const dynamicitem = (index: any) => {};
const dynamic = ref({
  tu: tubiao.value.lan1,
});

// 上传限制数量
const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `最多上传3个图片, 您选择了 ${files.length} 个图片, 总共 ${
      files.length + uploadFiles.length
    } 个图片`
  );
};
const widthimgitem = ref(false);
const widthimgyurl = ref("");
const widthimg = (item: any, index: any) => {
  widthimgyurl.value = item;
  widthimgitem.value = true;
};

// 巡检日志
const value2 = ref("");
</script>

<template>
  <div class="overview">
    <div class="overview-box">
      <!-- 巡检完成情况 -->
      <app-box class="overview-to" :title="'巡检完成情况'">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
          :stretch="true"
        >
          <el-tab-pane label="今日" name="first">
            <todaya
              v-if="activeName === 'first'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></todaya>
          </el-tab-pane>
          <el-tab-pane label="本周" name="second">
            <weeka
              v-if="activeName === 'second'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></weeka>
          </el-tab-pane>
          <el-tab-pane label="今年" name="third">
            <yeara
              v-if="activeName === 'third'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></yeara>
          </el-tab-pane>
        </el-tabs>
      </app-box>

      <!-- 巡检异常情况 -->
      <app-box class="overview-bm" :title="'巡检异常情况'">
        <el-tabs
          v-model="activeName1"
          class="demo-tabs"
          @tab-click="handleClick1"
          :stretch="true"
        >
          <el-tab-pane label="今日" name="firs">
            <todayb
              v-if="activeName1 === 'firs'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></todayb>
          </el-tab-pane>
          <el-tab-pane label="本周" name="secon">
            <weekb
              v-if="activeName1 === 'secon'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></weekb>
          </el-tab-pane>
          <el-tab-pane label="今年" name="thir">
            <yearb
              v-if="activeName1 === 'thir'"
              style="width: 550px; height: 280px"
              lazy="ture"
            ></yearb>
          </el-tab-pane>
        </el-tabs>
      </app-box>
    </div>

    <!-- 巡检点详情图 -->
    <app-box class="overview-r" :title="'巡检点详情图'">
      <div class="but">
        <el-button type="primary" size="small" @click="addItem"
          >配置巡检点</el-button
        >
        <div class="but-yuan">
          <div class="but-yuan-a"></div>
          <span class="but-yuan-text">未巡检</span>
          <div class="but-yuan-b"></div>
          <span class="but-yuan-text">已巡检</span>
        </div>
      </div>
      <!-- 巡检点详情图 -->
      <div class="apxbox">
        <div class="visual-left">
          <div class="map-block">
            <div class="map-loading">地图加载中...</div>
            <div class="map-id" style="opacity: 0" @dblclick="doubleclick">
              <img class="map-image" src="@/assets/image/home/map.png" alt="" />
              <div
                class="index-point"
                style=""
                :key="index"
                v-for="(c, index) in cameraList"
                :title="c.name"
                @click="cameraClick(c)"
                :style="returnCameraIndex(c)"
              >
                <!--  <img src="../image/gif/index2.gif"> -->
                <div class="camera-hover">
                  <div class="camera-hover-item">
                    <div class="camera-luxian">{{ index + 1 }}</div>
                  </div>
                  <img :src="tubiao.lan1" v-if="index >= 5" />
                  <img :src="tubiao.hong1" v-if="index <= 4" />
                  <!-- <img :src="tubiao.lv1" v-if="index > 10" /> -->
                  <!-- <img class="hover" src="@/assets/image/home/png/hong.png" /> -->
                </div>
              </div>
              <!-- <div
              class="index-point"
              v-for="(c, index) in ngListCarmeta"
              @click="cameraClickNgList(c, index)"
              :style="returnCameraIndex(c.cameraInfo)"
            >
              <img src="../image/gif/index2.gif" />
            </div> -->
            </div>
          </div>
        </div>
      </div>
    </app-box>
    <!-- 巡检点弹窗 -->
    <el-dialog v-model="dialogTableVisible" title="巡检点">
      <div class="dialog-box">
        <div class="dialog-box-l">
          <div class="dialog-box-text">巡检点信息</div>
          <div class="text-width">
            <span class="dialog-span1">创建时间：</span
            ><span class="dialog-span2">{{ dialogData.gmt_create }}</span>
          </div>
          <div class="text-width">
            <span class="dialog-span1">巡检点名称：</span
            ><span class="dialog-span2">{{ dialogData.name }}</span>
          </div>
          <div class="text-width">
            <span class="dialog-span1">设备型号：</span
            ><span class="dialog-span2">{{ dialogData.device_spec }}</span>
          </div>
          <div class="text-width">
            <span class="dialog-span1">巡检标准：</span
            ><span class="dialog-span2">{{ dialogData.standard }}</span>
          </div>
          <div class="text-width">
            <div class="dialog-span1">部门：</div>
            <span class="dialog-span2">{{ dialogData.userInfo.deptName }}</span>
          </div>
          <div class="text-width">
            <div class="dialog-span1">负责人：</div>
            <span class="dialog-span2">{{ dialogData.userInfo.name }}</span>
          </div>
          <div class="text-width">
            <div class="dialog-span1">手机号：</div>
            <span class="dialog-span2">{{ dialogData.userInfo.phone }}</span>
          </div>

          <div class="width-img">
            <img
              @click="widthimg(item, index)"
              class="width-img-a"
              :src="item"
              alt=""
              v-for="(item, index) in dialogData.files"
              :key="index"
            />
          </div>
        </div>
        <!-- 巡检点图片弹窗 -->
        <el-dialog v-model="widthimgitem" :show-close="false" width="750px">
          <img class="widthimgyurl" :src="widthimgyurl" alt="" />
        </el-dialog>

        <div class="dialog-box-r">
          <div class="dialog-box-text">巡检日志信息</div>

          <!-- <div class="text-width">
            <div class="dialog-span1">巡检时间：</div>
            <el-date-picker
              v-model="value2"
              type="date"
              placeholder="选择巡检日期"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </div> -->
          <div class="text-width-fen">
            <div
              class="text-width"
              v-for="(item, index) in getInspections"
              :key="index"
            >
              <div class="dialog-span1">巡检时间：</div>
              <span class="dialog-span2" @click="getInspectionsitem(item)">{{
                item.gmt_create
              }}</span>
            </div>
          </div>
          <el-pagination
            @current-change="handleCurrentChange"
            background
            small
            layout="prev, pager, next"
            :total="totalitem"
          />
          <el-dialog
            v-model="widthimggetInspec"
            title="巡检点日志"
            width="750px"
          >
            <div class="widthimggetInspec">
              <div class="widthimggetInspec-text">
                <div class="widthimggetInspec-text-box">
                  <div class="widthimggetInspec-item-a">
                    <div class="widthimggetInspec-div-f"></div>
                    <div>品牌名称：</div>
                  </div>
                  <div class="widthimggetInspec-item-b">
                    {{ widthimggetInspecitem.brand }}
                  </div>
                </div>
                <div class="widthimggetInspec-text-box">
                  <div class="widthimggetInspec-item-a">
                    <div class="widthimggetInspec-div-a"></div>
                    <div>设备型号：</div>
                  </div>
                  <div class="widthimggetInspec-item-b">
                    {{ widthimggetInspecitem.device_spec }}
                  </div>
                </div>
                <div class="widthimggetInspec-text-box">
                  <div class="widthimggetInspec-item-a">
                    <div class="widthimggetInspec-div-b"></div>
                    <div>巡检人：</div>
                  </div>
                  <div class="widthimggetInspec-item-b">
                    {{ widthimggetInspecitem.reportUserName }}
                  </div>
                </div>
                <div class="widthimggetInspec-text-box">
                  <div class="widthimggetInspec-item-a">
                    <div class="widthimggetInspec-div-c"></div>
                    <div>巡检人手机：</div>
                  </div>
                  <div class="widthimggetInspec-item-b">
                    {{ widthimggetInspecitem.phone }}
                  </div>
                </div>
                <div class="widthimggetInspec-text-box">
                  <div class="widthimggetInspec-item-a">
                    <div class="widthimggetInspec-div-d"></div>
                    <div>巡检结果：</div>
                  </div>
                  <div class="widthimggetInspec-item-b">
                    {{ widthimggetInspecitem.remark }}
                  </div>
                </div>
              </div>
              <div class="widthimggetInspec-img">
                <img
                  class="widthimggetInspec-img-item"
                  :src="widthimggetInspecitem.image_url"
                  alt=""
                />
                <!-- <img class="widthimggetInspec-img-item" src="http://3ssaas.com/public/upload/overall/634f952801bfd.jpg" alt="">
                <img class="widthimggetInspec-img-item" src="http://3ssaas.com/public/upload/overall/634f952801bfd.jpg" alt=""> -->
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-dialog>
    <!-- 设置地图 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="'配置巡检点'"
      v-model="dialogVisible_add"
      width="850px"
    >
      <el-form ref="form" :model="formData" label-width="130px">
        <el-form-item label="巡检点名称">
          <el-input
            type="text"
            placeholder="请输入巡检点名称"
            v-model="formData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检设备型号">
          <el-input
            type="text"
            placeholder="请输入巡检设备型号"
            v-model="formData.device_spec"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader
            style="width: 100%"
            placeholder="请选择部门"
            :props="cascaderProps"
            v-model="formData.dept_id"
            :options="deptOptions"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="地图坐标">
          <div class="btn-act">
            <el-input
              class="btn-input"
              type="text"
              placeholder="坐标"
              disabled
              v-model="formData.coordinate"
            ></el-input>
            <el-button class="btn" @click="openMap()" type="primary" plain
              >设置坐标</el-button
            >
          </div>
        </el-form-item>

        <el-form-item label="巡检点负责人">
          <!-- <el-input
            type="text"
            placeholder="请输入电话"
            v-model="formData.phone"
          ></el-input> -->
          <el-select
            @change="change"
            filterable
            clearable
            style="width: 80%"
            v-model="formData.user_id"
            placeholder="请选择"
          >
            <el-option
              :value="c.user_id"
              :label="c.name"
              :key="index"
              v-for="(c, index) in userList"
            >
              <span style="float: left">{{ c.name }}</span>
              <span style="float: right; font-size: 13px">{{ c.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检点负责人电话">
          <el-input
            v-model="formData.phone"
            disabled
            placeholder="巡检点负责人电话"
          />
        </el-form-item>
        <el-form-item label="巡检标准">
          <el-input
            v-model="formData.standard"
            maxlength="30"
            placeholder="此处有高压电！注意安全！"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
            name="uploadFile"
            action="http://3ssaas.com/common/overall/uploadFile"
            list-type="picture-card"
            :headers="headersObj"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="success"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="dialogVisibleab" width="600px">
            <img
              style="width: 550px"
              w-full
              :src="dialogImageUrlab"
              alt="Preview Image"
            />
          </el-dialog>
        </el-form-item>
      </el-form>
      <el-dialog
        :close-on-click-modal="false"
        title="提示"
        :destroy-on-close="true"
        v-model="dialogVisible_map"
        width="800"
      >
        <div class="setMapBlock-body">
          <div id="rightClickDiv">
            <div class="addProductSpan liHover">选择位置</div>
          </div>
          <div class="setMapBlock" @dblclick="doubleclick1" @click="mapClick1">
            <img src="@/assets/image/home/map.png" />
            <div class="index-point1" style="top: 1px; left: 1px">
              <img src="@/assets/image/home/png/lan.png" />
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible_map = false">取 消</el-button>
            <el-button type="primary" @click="setIndex()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <template #footer>
        <el-button @click="dialogVisible_add = false">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
// 巡检点弹窗

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

// 主页
.overview {
  width: 100%;
  height: 100%;
  display: flex;
}

.overview-box {
  width: 35%;
}

// 完成巡检
.overview-to {
  width: 100%;
  height: 50%;

  .overview-to-box {
    width: 100%;
    height: 90%;
  }
}

// 异常巡检
.overview-bm {
  width: 100%;
  height: calc(50% - 10px);
  margin-top: 10px;
}

.overview-r {
  width: 70%;
  height: 100%;
  margin-left: 10px;

  .apxbox {
    width: 100%;
    height: calc(100% - 120px);
  }
}

// 巡检点详情图

.but {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .but-yuan {
    display: flex;
    .but-yuan-a {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: #af0101;
      border: 2px solid #ee0401;
    }
    .but-yuan-b {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      margin-left: 20px;
      background-color: #2b6bd5;
      border: 2px solid #55a5ef;
    }
    .but-yuan-text {
      line-height: 30px;
      margin: 0 5px;
    }
  }
}

.visual-left {
  height: 100%;
  flex: 1;

  .camera-hover .hover {
    display: none;
  }

  // .camera-hover:hover .hover {
  //   display: block;
  // }

  .map-block {
    height: 100%;
    overflow: hidden !important;
    position: relative;
  }

  // .map-block img{
  //   width: auto;
  // height: auto;
  // }

  .map-id {
    display: inline-block;
    position: absolute;
    cursor: pointer;
  }

  .map-loading {
    color: #fff;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    text-align: center;
  }

  .map-id .index-point {
    width: 0;
    height: 0;
    position: absolute;
  }

  .map-id .index-point img {
    position: absolute;
    width: 100px;
    left: -100px;
    bottom: 0;
  }
}
// 设置地图
.setMapBlock-body {
  width: 100%;
  height: 500px;
  overflow: hidden !important;
  position: relative;
  border: 1px solid #000;
}
.setMapBlock {
  display: inline-block;
  position: absolute;
  cursor: pointer;
}

.setMapBlock .index-point1 {
  width: 0;
  height: 0;
  position: absolute;
  display: none;
}
.setMapBlock .index-point1 img {
  position: absolute;
  width: 100px;
  left: -100px;
  bottom: 0;
}

.btn-act {
  display: flex;

  .btn {
    margin-left: 15px;
  }
}
// 巡检路线
.camera-hover-item {
  width: 80px;
  height: 80px;
  // background-color: #000;
  position: relative;
  right: 50px;
  bottom: 50px;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255);
  z-index: 20;
  .camera-luxian {
    font-size: 50px;
    text-align: center;
    line-height: 80px;
    // right: 25px;
    // top: -80px;

    z-index: 99;
    font-weight: bold;
    text-shadow: 0 0 15px #000000, 0 0 15px #000000;
  }
}
// 巡检点信息弹窗
.dialog-box {
  display: flex;
  justify-content: space-between;

  // 左边内容
  .dialog-box-l {
    width: 300px;
    // background-color: #6b778c;
    .text-width {
      display: flex;
      .dialog-span1 {
        width: 100px;
        color: rgb(211, 211, 211);
        font-size: 16px;
        line-height: 30px;
        margin-bottom: 10px;
      }
      .dialog-span2 {
        color: rgb(253, 224, 61);
        font-size: 16px;
        background-color: rgb(34, 34, 34);
        border-radius: 5px;
        padding: 3px 15px;
        line-height: 25px;
        margin-bottom: 10px;
      }
    }
    .width-img {
      width: 280px;
      display: flex;
      flex-wrap: wrap;
      .width-img-a {
        width: 85px;
        height: 60px;
        margin: 2px;
      }
    }
    .dialog-box-text {
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px;
      color: rgb(88, 160, 241);
    }
  }

  // 右边内容
  .dialog-box-r {
    width: 350px;
    text-align: center;
    .text-width-fen {
      height: 350px;
      .text-width {
        display: flex;
        .dialog-span1 {
          width: 100px;
          color: rgb(211, 211, 211);
          font-size: 16px;
          line-height: 30px;
          margin-bottom: 10px;
        }
        .dialog-span2 {
          color: rgb(92, 247, 86);
          font-size: 16px;
          background-color: rgb(34, 34, 34);
          border-radius: 5px;
          padding: 3px 15px;
          line-height: 25px;
          margin-bottom: 10px;
          cursor: pointer;
        }
      }
    }

    .dialog-box-text {
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px;
      color: rgb(88, 160, 241);
    }
  }
}
.widthimgyurl {
  width: 610px;
}

// 巡检日志弹窗
.widthimggetInspec {
  display: flex;
  .widthimggetInspec-text {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .widthimggetInspec-text-box {
      margin-bottom: 20px;
      display: flex;
      .widthimggetInspec-item-a {
        display: flex;
        font-size: 18px;
        width: 120px;
      }
      .widthimggetInspec-item-b {
        font-size: 18px;
        color: #ffffff;
        width: 170px;
      }
    }
  }
  .widthimggetInspec-img {
    .widthimggetInspec-img-item {
      width: 320px;
      height: 200px;
    }
  }
}

.widthimggetInspec-div-a {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #ef8d55;
}
.widthimggetInspec-div-b {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #55c3ef;
}
.widthimggetInspec-div-c {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #ef5576;
}
.widthimggetInspec-div-d {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #7e55ef;
}
.widthimggetInspec-div-e {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #efe555;
}
.widthimggetInspec-div-f {
  width: 5px;
  height: 25px;
  border-radius: 20px;
  margin-right: 5px;
  background-color: #55efb4;
}
</style>
